import { useNavigate } from "react-router-dom"
import HomePage_TableComponent from "../../../../component/table"
import { useEffect, useRef, useState } from "react"
import { $beforeunload, $constantList, $EventBus_off, $EventBus_on, $nanoid_uuid, $websocketUrl } from "../../../../../../common/utils"
import ReconnectingWebSocket from "reconnecting-websocket"
import { message } from "antd"
import { render } from "@testing-library/react"

// 主页-实时动态页面-全线路页面
const HomePage_RealRimeDynamicsPage_FullLinePage: React.FC = () => {
  const navigate = useNavigate()
  const uuid = useRef<string>("")
  const socket = useRef<any>(null)
  const initParamsData = useRef<object>({})
  const paramsData = useRef<object>({})
  let [pageNo, setPageNo] = useState<number>(1)
  let [pageSize, setPageSize] = useState<number>(10)
  let [sourceData, setSourceData] = useState<object>({})
  const columnList = [
    {
      title: '序号',
      width: 60,
      render: (text: string, record: object, idx: number) => idx + 1,
    },
    {
      title: '监测线路',
      dataIndex: 'line',
      rowScope: 'row',
      minWidth: 85,
      render: (text: string) => text ?? "-"
    },
    {
      title: '类型',
      dataIndex: 'dataType',
      minWidth: 85,
      render: (text: string) => text ?? "-"
    },
    {
      title: '监测装置',
      dataIndex: 'monitorDevice',
      minWidth: 85,
      render: (text: string) => text ?? "-"
    },
    {
      title: 'A相电流(A)',
      dataIndex: 'aCur',
      align: "right",
      minWidth: 85,
      render: (text: string) => text ?? "-"
    },
    {
      title: 'B相电流(A)',
      dataIndex: 'bCur',
      align: "right",
      minWidth: 85,
      render: (text: string) => text ?? "-"
    },
    {
      title: 'C相电流(A)',
      dataIndex: 'cCur',
      align: "right",
      minWidth: 85,
      render: (text: string) => text ?? "-"
    },
    {
      title: '总和(A)',
      dataIndex: 'sumCur',
      align: "right",
      minWidth: 65,
      render: (text: string, record: object) => <span style={{ color: $constantList["stationStatusColor"][record["sumStatus"]] }}>{text ?? "-"}</span>
    },
    {
      title: '更新时间',
      dataIndex: 'updateTime',
      minWidth: 85
    },

  ];



  const change_pagination = (no: number, size: number) => {
    pageNo = no
    pageSize = size
    setPageNo(pageNo)
    setPageSize(pageSize)
    socket_send()
  }

  // 广播函数数据
  const eventBusFuncData = {
    // 头部操作初始参数
    headerOperationInitParamsData: (data: object) => {
      initParamsData.current = data["data"]["initParamsData"]
      paramsData.current = data["data"]["initParamsData"]
      ws_connect()
    },
    // 头部操作查询
    headerOperationSearch: (data: object) => {
      pageNo = 1
      setPageNo(pageNo)
      paramsData.current = { ...paramsData.current, ...data["data"]["paramsData"] }
      socket_send()
    },
    // 头部操作条件的开关
    headerOperationConditionSwitch: (data: object) => {
      pageNo = 1
      setPageNo(pageNo)
      paramsData.current = { ...initParamsData.current }
      socket_send()
    },
  }

  const socket_send = () => {
    socket.current.send(JSON.stringify(
      {
        token: sessionStorage.bearerToken,
        uuid: uuid.current,
        module: "table",
        type: "send",
        moduleName: "line",
        pageNo,
        pageSize,
        ...paramsData.current
      }
    ))
  }

  const ws_connect = () => {
    uuid.current = $nanoid_uuid()
    socket.current = new ReconnectingWebSocket($websocketUrl)
    socket.current.onopen = (data: object) => {
      socket_send()
    }
    socket.current.onmessage = (data: object) => {
      data = JSON.parse(data["data"])
      if (data["status"] === 200) {
        sourceData = data
      }

      else {
        sourceData = {}
        message.error(data["error"])
        if (data["status"] === 401) {
          navigate("/login"); //刷新 见 HomePage 
        }
      }
      setSourceData({ ...sourceData })
    }
    $beforeunload(socket.current, uuid.current, "table")
  }
  const ws_close = () => {
    socket.current.send(JSON.stringify(
      {
        uuid: uuid.current,
        module: "table",
        type: "close"
      }
    ))
  }
  useEffect(() => {
    $EventBus_on(eventBusFuncData)
    return () => {
      $EventBus_off(eventBusFuncData)
      ws_close()
    }
  }, [])
  return (

    <HomePage_TableComponent name="homePageRealRimeDynamicsPageFullLinePageTable"
      columnList={columnList} highlightList={["监测线路"]}
      alignRightList={["回流线电流(A)", "A相电流(A)", "B相电流(A)", "C相电流(A)", "总和(A)"]}
      pageNo={pageNo} pageSize={pageSize} sourceData={sourceData} change_pagination={change_pagination} />

  )
}

export default HomePage_RealRimeDynamicsPage_FullLinePage